<template>
<!-- 编辑金额 -->
  <public-dialog
    width="40%"
    title="编辑金额"
    confirm-button-title="确认"
    v-model:visible="visible"
    @on-confirm="onConfirm"
  >
      <template #default>
          <el-main
                  v-loading="isLoading"
                  element-loading-text="表单数据提交中..."
          >
              <el-form
                      :model="form"
                      label-width="120px"
              >
                  <el-form-item label="项目名称">
                      <el-input disabled :placeholder="form.projectName"></el-input>
                  </el-form-item>
                  <el-form-item label="营收类别">
                      <el-input disabled :placeholder="form.categoryName"></el-input>
                  </el-form-item>
                  <el-form-item label="总额">
                      <el-input disabled :placeholder="form.total"></el-input>
                  </el-form-item>
                  <el-form-item label="年度金额">
                      <el-button class="button_view" @click="addAmount">创建</el-button>
                  </el-form-item>
                  <el-form
                          ref="formRef"
                          :model="form"
                  >
                      <div v-for="(item,index) in form.cash" :key="index">
                          <div class="d-flex m-l50">
                              <el-form-item label-width="70px"  :prop="'cash.'+index+'.year'" :rules="rules.year">
                                  <el-date-picker
                                          v-model="item.year"
                                          value-format="YYYY"
                                          type="year"
                                          placeholder="请选择"
                                          size="large"
                                  />
                              </el-form-item>
                              <el-form-item class="m-l10"   :prop="'cash.'+index+'.amount'" :rules="rules.amount">
                                  <el-input
                                          v-model="item.amount"
                                          placeholder="请输入金额"
                                          type="number"
                                  ></el-input>
<!--                                  @input="item.amount = limitInputNum(item.amount,6,0,false)"-->
                              </el-form-item>
                              <el-form-item class="m-l10" v-if="index!==0">
                                  <el-button class="button_delete" @click="deleteAmount(index)">删除</el-button>
                              </el-form-item>
                          </div>
                      </div>
                  </el-form>
              </el-form>
          </el-main>
      </template>
  </public-dialog>
</template>

<script setup>
import PublicDialog from "@/components/PublicDialog.vue";
import {nextTick, reactive, ref} from "vue";
import {ElDatePicker, ElForm, ElFormItem, ElMain, ElMessage} from "element-plus";
import {limitInputNum} from "@/common/utils/GlobalUtils";
import {costEstimationApi, investmentProjects} from "@/api/investment";

const visible = ref(false);
const form = reactive({
    projectName:'',
    parentCategoryName:'',
    categoryName:'',
    total:'',
    categoryId:'',
    cash:[]
});

const rules = reactive({
    year:[
        { required: true, message: '请选择年份', trigger: 'change' },
    ],
    amount:[
        { required: true, message: '请输入金额', trigger: 'blur' },
    ]
});

/**
 * 新增金额
 */
const addAmount = () => {
  form.cash.push({
      year:'',
      amount:''
  });
}

/**
 * 删除金额
 */
const deleteAmount = (index) => {
  form.cash.splice(index,1);
}

/**
 * 弹窗确认事件
 */
const formRef = ref(null);
const isLoading = ref(false);
const emits = defineEmits(['onSuccess']);
const onConfirm = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            isLoading.value  =true;
            costEstimationApi.addProjectInvestmentCost(form).then(res=>{
               if(res.code === '200'){
                   isLoading.value  = false;
                   visible.value = false;
                   emits('onSuccess');
                   ElMessage.success('编辑成功!');
               }else{
                   isLoading.value  = false;
                   visible.value = false;
                   ElMessage.error('编辑失败!');
               }
            });
        } else {
            console.log('error submit!', fields)
        }
    });
}

/**
 * 初始化数据
 * @param form form
 * @param data row
 * @private
 */
const _initData = (form,data) => {
  for (let key in data) {
      if(key==='cash'){
          data.cash.forEach(item=>{
              item.year = item.year.toString();
              item.amount = item.amount.toString();
          });
          data.cash = data.cash.sort((a,b)=>{
              return a.year - b.year
          });
      }
      form[key] = data[key];
  }
}

/**
 * 打开弹窗
 */
const open = (row) => {
  _initData(form,row);
  visible.value = true;
 // 这句话放在这里执行会导致 对象数组属性里面的值为上一次的值
 /* nextTick(()=>{
    formRef.value.resetFields();
  });*/
}

/**
 * 关闭弹窗
 */
const close = () => {
  visible.value = false;
}

defineExpose({
    open,
    close
});
</script>

<style lang="scss" scoped>

</style>
